<template>
  <div class="userCenter">
    <div class="usertitleWrap">
      <div class="userTitle">
        <div class="userTitleLeft">
          <div class="imgWrap">
            <div class="img">
              <img :src="user.UHead" alt />
            </div>
            <span>s</span>
            <span>s</span>
          </div>
          <ul class="userInfo">
            <li>
              <h2>{{user.UserName}}</h2>
            </li>
            <li>
              <i class="iconfont">&#xe646;</i>
              积分：{{user.UPoint}}
            </li>
            <li>
              <i class="iconfont">&#xe7a0;</i>
              {{user.USex}}
            </li>
            <li>
              <i class="iconfont">&#xe7bb;</i>
              {{user.UCity}}
            </li>
            <li>
              <i class="iconfont">&#xe67b;</i>
              {{formatTime(user.URegtime)}}
            </li>
          </ul>
        </div>
        <div class="userTitleRight">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>个人信息</span>
            </div>
            <span v-if="!userInfoEdit">
              <span v-if="!user.Ustate">
                暂时还没个人简介
                <span @click="userInfoEdit=true">立即添加</span>
              </span>
              <span v-if="user.Ustate">{{user.Ustate}}</span>
            </span>

            <div class="editWrap" v-if="userInfoEdit">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userInfoText"></el-input>
              <div class="btnWrap">
                <el-button type="primary" size="mini" @click="userInfoEdit=false">取消</el-button>
                <el-button type="success" size="mini">提交</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="userMainWrap">
      <div class="userMain">
        <div class="userMainNav">
          <div class="title">
            <div class="titleWrap">
              <div class="left">
                <div>关注了</div>
                {{user.follow==undefined? 0:user.follow.length}} 人
              </div>
              <div class="right">
                <div>粉丝</div>0人
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <ul class="userNav">
            <li>我的主页</li>
            <li>我的文章</li>
          </ul>
        </div>
        <div class="userMainCenter">
          <el-tabs type="border-card" class="Good" @tab-click="handleClick">
            <el-tab-pane label="我赞过的文章">
              <ul class="myGood" >
                <li
                  class="myArtcile"
                  v-for="(item,index) of goodArtcile"
                  :key="index"
                  @click="toArticle(item.tid,item.tclickcoount)"
                >
                  <span class="gtime">
                    {{formatTimeGood(item.gtime) }}
                    <span
                      style="font-weight:550;margin-right:25px"
                    >赞过 ·</span>
                  </span>
                  <span>{{item.TTopic}}</span>
                </li>
              </ul>
              <div v-if="goodArtcile.length==0">还没有赞过文章</div>
            </el-tab-pane>
            <el-tab-pane label="我关注的人">
              <ul class="myFollow" v-loading="!myfollow.length">
                <li v-for="item of myfollow" :key="item.UID">
                  <div class="followUser">
                    <div class="img">
                      <img :src="item.UHead" alt />
                    </div>
                    <span>{{item.UserName}}</span>
                  </div>
                  <el-button size="mini">已关注</el-button>
                </li>
              </ul>
              <div v-if="myfollow.length==0">还没有关注过别人</div>
            </el-tab-pane>
          </el-tabs>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>我发布的文章</span>
            </div>
            <!-- <el-collapse>
              <el-collapse-item @click="getUserArt">
                <template slot="title" >
                  我发表过的文章
                  <i class="header-icon el-icon-info" ></i>
                </template>
                <ul class="articleItem" v-loading="!userArt.length">
                  <li v-for="(item,index) of userArt" :key="index">
                    <div>
                      <span>{{item.tgood}}赞</span>
                      <span>{{item.TReplyCount}}回复</span>
                    </div>
                    <h4>{{item.ttopic}}</h4>
                    <div class="artTime">{{ formatTimeGood(item.ttime)}}</div>
                  </li>
                </ul>
              </el-collapse-item>
              <el-collapse-item title="我的提问"></el-collapse-item>
            </el-collapse>-->
            <el-table :data="userArt" style="width: 100%">
              <el-table-column label="发布时间">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 5px">{{formatTimeGood(scope.row.ttime)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="我的文章">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>回复数: {{ scope.row.TReplyCount }}</p>
                    <p>点赞数: {{ scope.row.tgood }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.ttopic }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="editMyArticle(scope.row.tid,user.UID)">编辑</el-button>
                  <el-button
                    size="mini"
                    @click="delMyArtcile(scope.row.tid,user.UID)"
                    type="danger"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div class="userMainRight">
          <el-button type="danger" round style="width:100%" @click="logOut">退出登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { dateFtt, handleTime } from "../common/time";
export default {
  data() {
    return {
      userInfoEdit: false,
      userInfoText: "",
      goodArtcile: [],
      userArt: [],
      myfollow: []
    };
  },
  created() {
    // 赞过的文章
    this.getGoodArt();
    // 发表过的文章
    this.getUserArt();
  },
  methods: {
    // 用户赞过的文章
    async getGoodArt() {
      const res = await this.$http.post("blog/goodartcile", {
        uid: this.user.UID
      });
      if (res.errno == 0) {
        this.goodArtcile = res.data;
      }
    },
    // 用户发表的文章
    async getUserArt() {
      const res = await this.$http.post("blog/userart", {
        uid: this.user.UID
      });
      if (res.errno == 0) {
        this.userArt = res.data;
      }
    },
    // 时间 ：2020年4月14日13:57:11
    formatTime(time) {
      return dateFtt("YYYY-mm-dd HH:MM", new Date(time));
    },
    // 时间 ：几天前
    formatTimeGood(time) {
      return handleTime(time);
    },
    toArticle(tid, tclickcoount) {
      this.$router.push({
        name: "article",
        params: {
          tid: tid,
          clickcount: tclickcoount
        }
      });
    },
    // 编辑回显数据
    editMyArticle(tid, uid) {
      this.$router.push({
        name: "sendblog",
        params: {
          tid
        }
      });
    },
    delMyArtcile(tid, uid) {
      this.$confirm("删除就没了, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          const res = this.$http
            .post("blog/del", {
              tid,
              uid
            })
            .then(res => {
              if (res.errno == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getUserArt();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async getMyFollows() {
      const res = await this.$http.post("blog/follows", {
        uid: this.user.UID
      });
      if (res.errno == 0) {
        this.myfollow = res.data;
      }
    },
    handleClick(tab, event) {
      if (event.srcElement.textContent == "我关注的人") {
        this.getMyFollows();
      }
    },
    async logOut() {
      const res = await this.$http.post("login/logout");
      if (res.errno == 0) {
        localStorage.clear();
        this.$store.commit("logOut");
        this.$message.success("退出成功！记得常回来看看.");
        this.$router.push({ name: "index" });
      } else {
        this.$message.success("数据异常!");
      }
    }
  },
  computed: {
    ...mapGetters({ user: "getUser" })
  }
};
</script>

<style lang='scss'>
@media screen and(max-width: 1052px) {
  .userCenter {
    .usertitleWrap {
      .userTitle {
        width: 100% !important;
        flex-direction: column;
      }
    }
    .userMainWrap {
      .userMain {
        width: 100% !important;
        flex-direction: column;
      }
      .el-button + .el-button {
        margin-left: 0px;
        margin-top: 5px;
      }
    }
  }
}
.userCenter {
  width: 100%;
  margin: 0 auto;
  padding-top: 60px;
  height: 1000px;
  .usertitleWrap {
    width: 100%;
    background-color: #f6f6f6;
    .userTitle {
      width: 1140px;
      margin: 0 auto;
      display: flex;
      .userTitleLeft {
        flex: 2;
        display: flex;
        align-items: center;
        margin-top: 20px;
        .imgWrap {
          margin-left: 20px;
          text-align: center;
          .img {
            width: 95px;
            height: 95px;
            img {
              width: 100%;
              height: 100%;

              border-radius: 50%;
            }
          }
        }
        .userInfo {
          margin-left: 50px;
          li {
            margin: 15px;
          }
        }
      }
      .userTitleRight {
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 30px;
        flex: 1;
        .el-card__header {
          padding: 5px 5px;
        }
        .text {
          font-size: 14px;
        }
        .item {
          margin-bottom: 18px;
        }
        .box-card {
          background: #eeeeee;
        }
        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }
        .clearfix:after {
          clear: both;
        }
        .btnWrap {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  .userMainWrap {
    width: 100%;
    background: white;
    box-sizing: border-box;
    padding: 15px;
    .userMain {
      width: 1140px;
      margin: 15px auto;
      display: flex;
      .userMainNav {
        margin-right: 15px;
        flex: 1;
        .title {
          .titleWrap {
            display: flex;
            font-size: 18px;
            .left {
              flex: 1.5;
            }
            .right {
              flex: 1;
              text-align: center;
              border-left: 1px solid #eeeeee;
            }
          }
        }
        .el-divider {
          width: 75%;
          margin: 20px auto;
        }
        .userNav {
          li {
            height: 34px;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .userMainCenter {
        flex: 4;
        .el-card {
          margin-top: 20px;
          .el-card__header {
            padding: 5px 5px;
            background: #eeeeee;
          }
        }
        .Good {
          li {
            display: flex;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #eeeeee;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            justify-content: space-between;
          }
          .myArtcile {
            justify-content: flex-start;
          }
          .followUser {
            display: flex;
            align-items: center;
            justify-content: space-around;
            .img {
              width: 35px;
              height: 35px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
          .el-button {
            height: 30px;
          }
        }
        .articleItem {
          li {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              display: inline-block;
              height: 30px;
              line-height: 30px;
              text-align: center;
              width: 45px;
              margin-right: 5px;
              border-radius: 5px;
              font-size: 12px;
              background: #009a61;
              color: white;
            }
            border-bottom: 1px solid #eeeeee;
          }
        }
      }
      .userMainRight {
        margin-left: 15px;
        flex: 1;
      }
    }
  }
}
</style>